{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/browse.css' %}">
    <script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <style>
        .content{
             width: 90%;
            margin: 0 auto;
        }
            .content table{
    width: 90%;
    border-collapse: collapse;
    margin: 20px auto;
    text-align: center;
}
table td, table th{
    border: 1px solid #cad9ea;
    text-align: center;
    color: #666;
    height: 30px;
}

table thead th{
    background-color: #CCE8EB;
    width: 100px;
}

table tr:nth-child(odd){
    background: #fff;
}

table tr:nth-child(even){
    background: #F5FAFA;
}
table tbody tr td a:link{
    text-decoration: none;
}
.list tbody tr td a:hover{
     color: #3a3a3a;
}

        .pagination{

    display: block;
    width: 90%;
    height: 20px;
    {#margin: 25px 300px;#}
    margin-left: 60px;
}  .D_line{
    margin-top: 30px;
    height: 50px;
    width: 100%;
    background-color: #01A9DC;
    margin-bottom: 10px;

}
        .copy{
    text-align: center;
    font-size: 14px;
            line-height: 25px;
            font-weight: 700;
}
        </style>

</head>
<body>
    <header class="container-fluid">
        <img src="{% static 'images/logo.png' %}" alt="PPCsPG" class="img-responsive" id="img">
        <div class="row">
            <nav class="navbar navbar-inverse" id="nav">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                       <a class="navbar-brand" href="/">PPCsPG</a>

                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav  navbar-right navbar-nav">
                            <li class="active"><a href="/" >Home </a></li>
                            <li ><a href="{% url 'browse' %}">Browse</a></li>
                            <li><a href="{% url 'search' %}">Search</a></li>
                            <li><a href="https://www.genome.jp/tools/blast/">Blast</a></li>
                            <li><a href="{% url 'peptide.peptide' %}">Prediction</a></li>
                            <li><a href="{% url 'download' %}">Download</a></li>
                            <li><a href="{% url 'help' %}">Help</a></li>
                      </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <div class="container-fluid  content">

            <table class="list" border="1" style="width: 90%;
                                        border-collapse: collapse;
                                        margin: 40px auto;
                                        text-align: center;">
            <thead>

                    <tr>
                        <th>Entry ID</th>
                        <th>Refseq ID</th>
                        <th>Species</th>
                        <th>Type</th>
                        <th>Length</th>
                        <th>Function</th>
                    </tr>
            </thead>
            <tbody>
{##}
                {% for row in out_list %}
                    <tr>
                        <td><a href="{% url 'detail' PPCsPG=row.1 %}">{{ row.1}}</a></td>
                        <td><a href='https://www.ncbi.nlm.nih.gov/refseq/'>{{ row.2 }}</a></td>
                        <td>{{ row.3 }}</td>
                        <td>{{ row.4 }}</td>
                        <td>{{ row.6 }}</td>
                        <td>{{ row.7 }}</td>
                    </tr>
                {% endfor %}
{#                <ul>#}
{#                    {% for row in out_list %}#}
{#                        <li>{{ row.ppcspg_id }}</li>#}
{#                    {% endfor %}#}
{#                </ul>#}

            </tbody>
        </table>

        <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm">
            {{ page_info.page|safe }}
        </ul>
    </nav>
    </div>


        <div class="D_line"> <p class="copy">Copyright@ 山东省生物物理重点实验室  联系电话：0534-8985884   邮箱：swwlzdsys@163.com
<br />实验室地址:山东省德州市德城区大学西路566号 邮政编码:253023</p></div>

    </div>
</body>
</html>